@use "utils/variables";

del .mention-link,
del .group-mention-link {
    text-decoration: line-through;
}

del .mention-link:hover,
del .mention-link:focus,
del .group-mention-link:hover,
del .group-mention-link:focus {
    text-decoration: line-through underline;
}

.mention {
    position: relative;
    z-index: 10;
    padding-bottom: 2px;
    border-radius: 3px;
    background: variables.$primary-color;
    color: variables.$white;
}

.mention-link {
    color: var(--link-color);

    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    border-radius: 10px;
    background-color: #777;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.mention--highlight {
    padding: 0 1px;
    border-radius: 4px;
    background-color: var(--mention-highlight-bg);
    color: var(--mention-highlight-link);

    .mention-link,
    .mention-link:hover,
    .mention-link:focus {
        color: var(--mention-highlight-link);
    }

    .mention--highlight {
        padding: 0;
        background: none;
    }
}

.non-notification-highlight {
    padding: 0 1px;
    border-radius: 4px;
    background-color: var(--mention-highlight-bg);
    color: var(--mention-highlight-link);
}

.group-mention-link {
    color: var(--link-color);
}
